/*
 * 图片转换对话框脚本
 */

var tableData = [],
// 编辑器页面table
editorTable = null, chartsConfig = window.typeConfig, resizeTimer = null,
// 初始默认图表类型
currentChartType = 0;

window.onload = function() {

	editorTable = domUtils.findParentByTagName(
			editor.selection.getRange().startContainer, 'table', true);

	// 未找到表格， 显示错误页面
	if (!editorTable) {
		document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>";
		return;
	}

	// 初始化图表类型选择
	initChartsTypeView();
	renderTable(editorTable);
	initEvent();
	initUserConfig(editorTable.getAttribute("data-chart"));
	$("#scrollBed .view-box:eq(" + currentChartType + ")").trigger("click");
	updateViewType(currentChartType);

	dialog.addListener("resize", function() {

				if (resizeTimer != null) {
					window.clearTimeout(resizeTimer);
				}

				resizeTimer = window.setTimeout(function() {

							resizeTimer = null;

							renderCharts();

						}, 500);

			});

};

function initChartsTypeView() {

	var contents = [];

	for (var i = 0, len = chartsConfig.length; i < len; i++) {

		contents.push('<div class="view-box" data-chart-type="' + i
				+ '"><img width="300" src="images/charts' + i + '.png"></div>');

	}

	$("#scrollBed").html(contents.join(""));

}

// 渲染table， 以便用户修改数据
function renderTable(table) {

	var tableHtml = [];

	// 构造数据
	for (var i = 0, row; row = table.rows[i]; i++) {

		tableData[i] = [];
		tableHtml[i] = [];

		for (var j = 0, cell; cell = row.cells[j]; j++) {

			var value = getCellValue(cell);

			if (i > 0 && j > 0) {
				value = +value;
			}

			if (i === 0 || j === 0) {
				tableHtml[i].push('<th>' + value + '</th>');
			} else {
				tableHtml[i]
						.push('<td><input type="text" class="data-item" value="'
								+ value + '"></td>');
			}

			tableData[i][j] = value;

		}

		tableHtml[i] = tableHtml[i].join("");

	}

	// draw 表格
	$("#tableContainer").html('<table id="showTable" border="1"><tbody><tr>'
			+ tableHtml.join("</tr><tr>") + '</tr></tbody></table>');

}

/*
 * 根据表格已有的图表属性初始化当前图表属性
 */
function initUserConfig(config) {

	var parsedConfig = {};

	if (!config) {
		return;
	}

	config = config.split(";");

	$.each(config, function(index, item) {

				item = item.split(":");
				parsedConfig[item[0]] = item[1];

			});

	setUserConfig(parsedConfig);

}

function initEvent() {

	var cacheValue = null,
	// 图表类型数
	typeViewCount = chartsConfig.length - 1, $chartsTypeViewBox = $('#scrollBed .view-box');

	$(".charts-format").delegate(".format-ctrl", "change", function() {

				renderCharts();

			})

	$(".table-view").delegate(".data-item", "focus", function() {

				cacheValue = this.value;

			}).delegate(".data-item", "blur", function() {

				if (this.value !== cacheValue) {
					renderCharts();
				}

				cacheValue = null;

			});

	$("#buttonContainer").delegate("a", "click", function(e) {

				e.preventDefault();

				if (this.getAttribute("data-title") === 'prev') {

					if (currentChartType > 0) {
						currentChartType--;
						updateViewType(currentChartType);
					}

				} else {

					if (currentChartType < typeViewCount) {
						currentChartType++;
						updateViewType(currentChartType);
					}

				}

			});

	// 图表类型变化
	$('#scrollBed').delegate(".view-box", "click", function(e) {

				var index = $(this).attr("data-chart-type");
				$chartsTypeViewBox.removeClass("selected");
				$($chartsTypeViewBox[index]).addClass("selected");

				currentChartType = index | 0;

				// 饼图， 禁用部分配置
				if (currentChartType === chartsConfig.length - 1) {

					disableNotPieConfig();

					// 启用完整配置
				} else {

					enableNotPieConfig();

				}

				renderCharts();

			});

}

function renderCharts() {

	var data = collectData();

	$('#chartsContainer').highcharts($.extend({},
			chartsConfig[currentChartType], {

				credits : {
					enabled : false
				},
				exporting : {
					enabled : false
				},
				title : {
					text : data.title,
					x : -20
					// center
				},
				subtitle : {
					text : data.subTitle,
					x : -20
				},
				xAxis : {
					title : {
						text : data.xTitle
					},
					categories : data.categories
				},
				yAxis : {
					title : {
						text : data.yTitle
					},
					plotLines : [{
								value : 0,
								width : 1,
								color : '#808080'
							}]
				},
				tooltip : {
					enabled : true,
					valueSuffix : data.suffix
				},
				legend : {
					layout : 'vertical',
					align : 'right',
					verticalAlign : 'middle',
					borderWidth : 1
				},
				series : data.series

			}));

}

function updateViewType(index) {

	$("#scrollBed").css('marginLeft', -index * 324 + 'px');

}

function collectData() {

	var form = document.forms['data-form'], data = null;

	if (currentChartType !== chartsConfig.length - 1) {

		data = getSeriesAndCategories();
		$.extend(data, getUserConfig());

		// 饼图数据格式
	} else {
		data = getSeriesForPieChart();
		data.title = form['title'].value;
		data.suffix = form['unit'].value;
	}

	return data;

}

/**
 * 获取用户配置信息
 */
function getUserConfig() {

	var form = document.forms['data-form'], info = {
		title : form['title'].value,
		subTitle : form['sub-title'].value,
		xTitle : form['x-title'].value,
		yTitle : form['y-title'].value,
		suffix : form['unit'].value,
		// 数据对齐方式
		tableDataFormat : getTableDataFormat(),
		// 饼图提示文字
		tip : $("#tipInput").val()
	};

	return info;

}

function setUserConfig(config) {

	var form = document.forms['data-form'];

	config.title && (form['title'].value = config.title);
	config.subTitle && (form['sub-title'].value = config.subTitle);
	config.xTitle && (form['x-title'].value = config.xTitle);
	config.yTitle && (form['y-title'].value = config.yTitle);
	config.suffix && (form['unit'].value = config.suffix);
	config.dataFormat == "-1" && (form['charts-format'][1].checked = true);
	config.tip && (form['tip'].value = config.tip);
	currentChartType = config.chartType || 0;

}

function getSeriesAndCategories() {

	var form = document.forms['data-form'], series = [], categories = [], tmp = [], tableData = getTableData();

	// 反转数据
	if (getTableDataFormat() === "-1") {

		for (var i = 0, len = tableData.length; i < len; i++) {

			for (var j = 0, jlen = tableData[i].length; j < jlen; j++) {

				if (!tmp[j]) {
					tmp[j] = [];
				}

				tmp[j][i] = tableData[i][j];

			}

		}

		tableData = tmp;

	}

	categories = tableData[0].slice(1);

	for (var i = 1, data; data = tableData[i]; i++) {

		series.push({
					name : data[0],
					data : data.slice(1)
				});

	}

	return {
		series : series,
		categories : categories
	};

}

/*
 * 获取数据源数据对齐方式
 */
function getTableDataFormat() {

	var form = document.forms['data-form'], items = form['charts-format'];

	return items[0].checked ? items[0].value : items[1].value;

}

/*
 * 禁用非饼图类型的配置项
 */
function disableNotPieConfig() {

	updateConfigItem('disable');

}

/*
 * 启用非饼图类型的配置项
 */
function enableNotPieConfig() {

	updateConfigItem('enable');

}

function updateConfigItem(value) {

	var table = $("#showTable")[0], isDisable = value === 'disable'
			? true
			: false;

	// table中的input处理
	for (var i = 2, row; row = table.rows[i]; i++) {

		for (var j = 1, cell; cell = row.cells[j]; j++) {

			$("input", cell).attr("disabled", isDisable);

		}

	}

	// 其他项处理
	$("input.not-pie-item").attr("disabled", isDisable);
	$("#tipInput").attr("disabled", !isDisable)

}

/*
 * 获取饼图数据 饼图的数据只取第一行的
 */
function getSeriesForPieChart() {

	var series = {
		type : 'pie',
		name : $("#tipInput").val(),
		data : []
	}, tableData = getTableData();

	for (var j = 1, jlen = tableData[0].length; j < jlen; j++) {

		var title = tableData[0][j], val = tableData[1][j];

		series.data.push([title, val]);

	}

	return {
		series : [series]
	};

}

function getTableData() {

	var table = document.getElementById("showTable"), xCount = table.rows[0].cells.length
			- 1, values = getTableInputValue();

	for (var i = 0, value; value = values[i]; i++) {

		tableData[Math.floor(i / xCount) + 1][i % xCount + 1] = values[i];

	}

	return tableData;

}

function getTableInputValue() {

	var table = document.getElementById("showTable"), inputs = table
			.getElementsByTagName("input"), values = [];

	for (var i = 0, input; input = inputs[i]; i++) {
		values.push(input.value | 0);
	}

	return values;

}

function getCellValue(cell) {

	var value = utils.trim((cell.innerText || cell.textContent || ''));

	return value.replace(new RegExp(UE.dom.domUtils.fillChar, 'g'), '')
			.replace(/^\s+|\s+$/g, '');

}

// dialog确认事件
dialog.onok = function() {

	// 收集信息
	var form = document.forms['data-form'], info = getUserConfig();

	// 添加图表类型
	info.chartType = currentChartType;

	// 同步表格数据到编辑器
	syncTableData();

	// 执行图表命令
	editor.execCommand('charts', info);

};

/*
 * 同步图表编辑视图的表格数据到编辑器里的原始表格
 */
function syncTableData() {

	var tableData = getTableData();

	for (var i = 1, row; row = editorTable.rows[i]; i++) {

		for (var j = 1, cell; cell = row.cells[j]; j++) {

			cell.innerHTML = tableData[i][j];

		}

	}

}